<template>
    <div class="title">
        <h3>订单中心</h3>
    </div>
    <div class="user">
        <div>
            <img class="avatar" :src="avatar" alt="">
        </div>
        <div class="info">
            <h4>{{escort}}</h4>
            <p style="background-color:#eaeaea;font-size: 12px;text-align: center;border-radius: 3px;margin-top: 5px;">{{occupancy}}</p>
        </div>
    </div>
    <div class="orders">
      <van-tabs class="items"  @click-tab="onClickTab">
        <van-tab v-for="(item,i) in tablist" :title="item" :key="i">
          <div v-if="msg" class="order" v-for="i in message" :key="i.id">
            <div class="order_1">
                    <h4>医院:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ i.hospital}}</h4>
                    <h4>类型:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ i.service_item}}</h4>
                    <h4>状态:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ i.status}}</h4>
                    <h4>科室:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ i.department}}</h4>
                    <h4>价格:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ i.price }}</h4>
                    <h4>时间:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ i.expect_time }}</h4>
            </div>
          </div>
          <div v-else class="no_data">
            <img style="width:100px;height:100px" src="/public/u=3771936563,2624828435&fm=253&fmt=auto&app=138&f=PNG.webp" alt="">
            <h3>暂无数据</h3>
          </div>
        </van-tab>
      </van-tabs>
    </div>
      <tabbar></tabbar>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import http from '@/http';
import tabbar from './tabbar.vue';
import {useUserStore} from '@/stores/counter';
let message = ref('');
let msg = ref(false);
let userStore = useUserStore();
let tablist=['全部','待服务','进行中','已完成','已取消']
let escort = ref('');
let occupancy = ref('');
let avatar = ref('');

const onClickTab = ({ title }) =>  http.post('/escort/order_status/',{
        phone: userStore.phone,
        type: title,
    }).then((res) => {
        if (res.data.length == 0){
            msg.value = false
        }else {
            msg.value = true
            message.value = res.data
        }
    }).catch((err) => {
        console.log(err)
    });
;
onMounted(() => {
    http.post('/escort/get_escort/', {
        phone: userStore.phone,
        
    }).then((res) => {
        escort.value = res.data[0].e_name;
        occupancy.value = res.data[0].occupancy;
        avatar.value = res.data[0].img
        console.log('>>>>>>',res.data)
    }).catch((err) => {
        console.log(err)
    });

    http.post('/escort/order_center/',{
        phone: userStore.phone,
    })
    .then((res) => {
        if (res.data.length == 0){
            msg.value = false
        }else {
            msg.value = true
            message.value = res.data
        }
        console.log(res.data)
    }).catch((err) => {
        console.log(err)
    })
})
</script>
<style scoped>
.orders {
    height: 100%;
    margin-bottom: 10vb;
}
.title {
    display:flex;
    justify-content: center;
    align-items: center;
    
}
.avatar {
    width:80px;
    height:80px;
    border-radius: 50%;
    
}
h4 {
    margin: 0;
    padding: 0;
}
p {
    margin: 0;
    padding: 0;
}
.user {
    width:90%;
    margin-left: 5%;
    display:flex;

}
.info {
    height: 80px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    margin-left: 20px;
}
.tab-title {
    font-size: 20px;
    font-weight: bold;
}
.order {
    background-color:gainsboro; 
    border-radius: 10px;
    background-size: 100% 280px;
    height: 180px;
    width:90%; margin-left: 5%;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 20px;
}
.order_1 {
    margin-left: 20%;
    height: 100%;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
}
.no_data {
    display:flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 600px;
    
}
.items {
    height: 100%;
}
</style>